<template>
  <div class="preview">
    <template v-for="config in list" :key="config.id">
      <component :is="config.package" :config="config" />
    </template>
  </div>
</template>

<script lang="ts" setup>
import { ref, onMounted } from "vue";
import { componentInstall } from "@/materials";
import type { ComponentType } from "@/materials/index.d";

defineOptions({
  name: "Preview",
});

const list = ref<ComponentType[]>([]);

onMounted(async () => {
  // 1. 先注册全局组件
  const componentList: ComponentType[] = JSON.parse(
    sessionStorage.getItem("componentList")!
  );
  // componentList.forEach(async (component) => {
  //   await componentInstall(component as any);
  // });
  for (let i = 0; i < componentList.length; i++) {
    const component = componentList[i] as any;
    await componentInstall(component);
  }
  // 2. 更新数据
  list.value = componentList;
});
</script>

<style lang="scss" scoped>
.preview {
  width: 100%;
  height: 100%;
  background-color: #fff;
}
</style>
